<template>
  <div class="top">
    <div class="maoDian">
      <div class="left_games">
        <router-link
          v-for="item of gameTypeList"
          :key="item.id"
          class="el-dropdown-link"
          :class="{ active: $route.name == item.url }"
          :to="{ name: item.url }"
          @click.native="getList(item.category_list)"
        >
          {{ item.name }}
        </router-link>
      </div>
      <div>
        <router-link class="el-dropdown-link" to="/">
          <img
            src="@/assets/img/games/foot_logo.a663f60b.jpg"
            alt=""
            style="width: 100%; height: 60px"
          />
        </router-link>
      </div>
    </div>
    <div class="topImg">
      <img src="@/assets/img/bannerIcon.png" />
      <a href="https://d21ei325leplyc.cloudfront.net/apk/luckywinner.apk">{{
        $t("DownloadAPP")
      }}</a>
    </div>
  </div>
</template>
<script>
import { httpGameClass } from "@/http/api";
export default {
  name: "topGames",
  data() {
    return {
      category_list: [],
      gameTypeList: [],
    };
  },
  methods: {
    getList(data) {
      this.$emit("getList", data);
    },
  },

  async mounted() {
    await httpGameClass().then((res) => {
      if (res.code == 0) {
        let arr =
          res.data.filter((item) => {
            return item.id !== 0 && item.id !== 4 && item.id !== 1;
          }) || [];
        arr.forEach((item) => {
          if (item.name == this.$t("Fishing")) {
            item.url = "Fishing";
          }
          if (item.name == this.$t("Chess")) {
            item.url = "Chess";
          }
          if (item.name == this.$t("Sports")) {
            item.url = "Sports";
          }
          if (item.name == this.$t("lottery")) {
            item.url = "lottery";
          }
        });
        this.gameTypeList = arr;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.top {
  width: 1200px;
  height: 70px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  .maoDian {
    flex: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    .left_games {
      width: 50%;
    }
    a {
      display: inline-block;
      color: #5c5c5c;
      cursor: pointer;
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .topImg {
    display: flex;
    justify-content: start;
    align-items: center;
    min-width: 30px;
    img {
      width: 20px;
      height: 20px;
      margin-right: 2%;
    }
    a {
      display: inline-block;
      min-width: 120px;
      color: #333;
      margin-left: 5px;
    }
  }
}
.active {
  color: #513316 !important;
  font-weight: bolder;
}
</style>
